import React, { useEffect, useState, useRef } from 'react';
import { Button, Select, Pagination, Form, Input } from 'antd';
import api from '../../../../api';
import { useMappedState, useDispatch } from 'redux-react-hook';
import {
    set_delVisible,
    set_delId,
} from '../../../../store/action/house';
import GroupTable from './components/Table';
import DelGroup from './components/DelGroup';

import './index.css'

const { Option } = Select;

const GroupBuying = () => {
    const dispatch = useDispatch();
    // 获取元素内容
    const form = useRef<any>(null);
    // 变量
    // 团购列表
    const [groupList, setGroupList] = useState<any>([]);
    // 页码
    const [pageIndex, setPageIndex] = useState<number>(1);
    // 每页的数量
    const [pageSize, setPageSize] = useState<number>(5);
    // 总数
    const [total, setTotal] = useState<number>(0);
    // 省份列表
    const [provinceList, setProvinceList] = useState<any>([]);
    // 城市列表
    const [cityList, setCityList] = useState<any>([]);
    // 区县列表
    const [countyList, setCountyList] = useState<any>([]);
    // 当前选择区域
    const [area, setArea] = useState<string>('');
    // 楼盘名称
    const [buildingName, setBuildingName] = useState<string>('');
    // 楼盘地址
    const [buildingAddress, setBuildingAddress] = useState<string>('');
    // 状态
    const [status, setStatus] = useState<string>('');
    // 团购状态
    const [groupState, setGroupState] = useState<string>('');
    // 生命周期
    useEffect(() => {
        getProvinceList();
    }, []);
    // 监听状态的变化
    useEffect(() => {
        getGroupList();
    }, [pageIndex, groupState,buildingName,buildingAddress,status])
    // 方法
    // 选择县之后
    const provinceChange = (value: any, option: any) => {
        // 修改当前选择的区域
        setArea(option.children);
        // 调用获取城市列表
        getCityList(value);
    }
    // 选择城市之后
    const cityChange = (value: any, option: any) => {
        // 修改当前选择的区域
        setArea(area + option.children);
        // 调用获取区县列表
        getCountyList(value)
    }
    // 选择区县之后
    const countyChange = (value: any, option: any) => {
        // 修改当前选择的区域
        setArea(area + option.children);
    }
    // 获取团购列表
    const getGroupList = () => {
        api.getGroupList({
            pageIndex,
            pageSize,
            building_name: buildingName,
            building_address: buildingAddress,
            state: status,
            group_state: groupState,
            area
        }).then((res: any) => {
            if (res.success) {
                setGroupList(res.data.data)
                setTotal(res.data.total);
            }
        })
    };
    // 获取省份列表
    const getProvinceList = () => {
        api.getProvinceList().then((res: any) => {
            setProvinceList([...res.data]);
        })
    }
    // 获取城市列表
    const getCityList = (id: number) => {
        api.getCityList({
            pid: id
        }).then((res: any) => {
            setCityList([...res.data]);
        })
    }
    // 获取区县列表
    const getCountyList = (id: number) => {
        api.getCountyList({
            pid: id
        }).then((res: any) => {
            setCountyList([...res.data]);
        })
    }
    // 页码改变
    const pageChange = (num: number) => {
        setPageIndex(num);
    }
    // 点击搜索按钮
    const onFinish = async (values: any) => {
        setBuildingName(values.building_name)
        setBuildingAddress(values.building_address)
        setStatus(values.status)
        setGroupState(values.group_state)
        // 让页码重置
        setPageIndex(1)
    };
    // 点击重置按钮
    const reset = () => {
        // 清空表单
        form.current.resetFields()
        // 重置地区
        setArea('');
        setBuildingName('')
        setBuildingAddress('')
        setStatus('')
        setGroupState('')
    }
    // 删除
    const delGroup = (id: string) => {
        dispatch(set_delVisible(true))
        // 把id存储起来
        dispatch(set_delId(id));
    }
    return (
        <div className="group">
            <div className="header-group">
                团购管理
            </div>
            <div className="wrapper-group">
                {/*  */}
                <div className="search-group">
                    <Form
                        layout="horizontal"
                        onFinish={onFinish}
                        ref={form}
                    >
                        <Form.Item label="搜索" name="building_name">
                            <Input placeholder="楼盘名称" />
                        </Form.Item>
                        <Form.Item label="状态" name="status">
                            <Select placeholder="请选择状态">
                                <Select.Option value="0">异常</Select.Option>
                                <Select.Option value="1">正常</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="province" initialValue="请选择省份">
                            <Select onChange={provinceChange}
                            >
                                {provinceList[0] && provinceList.map((item: any) => {
                                    return <Option value={item.id} key={item.id}>{item.ext_name || item.name}</Option>
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item name="city" initialValue="请选择城市">
                            <Select onChange={cityChange}
                            >
                                {cityList[0] && cityList.map((item: any) => {
                                    return <Option value={item.id} key={item.id}>{item.ext_name}</Option>
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item name="county" initialValue="请选择区县">
                            <Select onChange={countyChange}>
                                {countyList[0] && countyList.map((item: any) => {
                                    return <Option value={item.id} key={item.id}>{item.ext_name}</Option>
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item name="building_address">
                            <Input placeholder='关键字'
                            />
                        </Form.Item>
                        <Form.Item label="状态" name="group_state">
                            <Select placeholder="请选择团购状态">
                                <Select.Option value="0">未开团</Select.Option>
                                <Select.Option value="1">已开团</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary"
                                onClick={reset}
                            >重置</Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary"
                                htmlType="submit"
                            >查询</Button>
                        </Form.Item>
                    </Form>
                </div>
                {/*  */}
                <GroupTable dataSource={groupList}
                    getGroupList={() => { getGroupList() }}
                    delGroup={(id: string) => { delGroup(id) }}
                ></GroupTable>
                {/*  */}
                <div className="pag-group">
                    <Pagination current={pageIndex} total={total} pageSize={pageSize} onChange={pageChange} />
                </div>
                {/*  */}
                <DelGroup getGroupList={() => { getGroupList() }}></DelGroup>
            </div>
        </div>
    )
};

export default GroupBuying